<template>
	<view>
		<view class="already"  v-if="userInfo.status==1">
			<view class="text">
				已完成实名认证
			</view>
		</view>
		
		<view class="" v-else>
			<view class="header">
				<view class="w-670">
					<icon type="warn" size="24" />
					<text>为了您的资金安全,请提交以下信息进行身份核实</text>
				</view>
			</view>
			<view class="w-670">
				<form>
					<view class="cu-form-group margin-top  ">
						<view class="title ">姓名</view>
						<input placeholder="请输入姓名" type="text" placeholder-class="fs-24" v-model="user.realName">
						<text class="cuIcon-people"></text>
					</view>
					<view class="cu-form-group">
						<view class="title">身份证号码</view>
						<input placeholder="请填写身份证号码" type="number" placeholder-class="fs-24" v-model="user.idCard">
						<text class="cuIcon-news"></text>
					</view>
					<!-- <view class="cu-form-group">
						<view class="title">银行卡账号</view>
						<input placeholder="请填写本人银行卡账号" type="number" placeholder-class="fs-24"
							v-model="user.bankNum"></input>
						<text class="cuIcon-card"></text>
					</view>
					<view class="cu-form-group ">
						<view class="title">手机号码</view>
						<input placeholder="请输入本人手机号码" type="number" placeholder-class="fs-24" v-model="user.tel"></input>
						<text class="cuIcon-mobilefill"></text>
					</view> -->
			
					<!-- <radio-group class="block " @change="radioValue">
						<view class="cu-form-group sex">
							<view class="title">性别</view>
							<view>
								<view>
									<label class="radio margin-right">
										<radio value="男" />男
									</label>
									<label class="radio">
										<radio value="女" />女
									</label>
								</view>
							</view>
						</view>
					</radio-group> -->
			
				</form>
				<checkbox-group class="block" @change="CheckboxChange">
					<view class="margin-top flex">
			
						<label>
							<checkbox value="同意" />
						</label>
						<view class="flex">
							<view class="title margin-left-sm text-gray">我已阅读并同意</view>
							<navigator url="" class="padding-left text-blue">相关协议</navigator>
			
						</view>
					</view>
				</checkbox-group>
				<button class="bg-blue btn-lg round margin-top-lg " @tap="btSubmit">下一步</button>
			</view>
			<!-- 支付密码模态框 -->
			<payPass ref="verify" @finish="getCode"></payPass>
			<payPass ref="verify2" @finish="getCode2"></payPass>
			<!-- 支付密码模态框 -->
		</view>
		
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex"
	const {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers("users")
	import payPass from '../../components/pay-pass/pay-pass.vue'
	export default {
		components: {
			payPass
		},
		onLoad() {
			console.log(this.userInfo.status)
		},
		data() {
			return {
				agree:"",
				user: {
					id:uni.getStorageSync('userid'),
					realName: '',
					idCard: '',
					// bankNum: '6266666666666666',
					// tel: '15188888888',
					// sex: '',
					// agree: '',
					payPassword: ''
				}
			}
		},
		computed:{
			...mapState(['userInfo'])
		},
		methods: {
			...mapActions(['realNameAuth','payPasswordChange']),
			// 单选框
			radioValue(e) {
				// 拿到用户性别信息
				console.log(e.detail.value)
				console.log('单选框')
				this.user.sex = e.detail.value
			},
			// 复选框
			CheckboxChange(e) {
				// 拿到用户是否同意协议信息
				console.log(e.detail.value)
				this.agree = e.detail.value.length ? true : false;


			},
			getUser() {
				console.log(this.user) //拿到用户所有信息
			},

			btSubmit() {
				const u = this.user;

				if (u.realName == '' || /[u4E00-u9FA5]/.test(u.realName)) {
					uni.showToast({
						title: '请输入正确的姓名！',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				console.log(u.idCard)
				if (!/^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/.test(u.idCard)) {
					uni.showToast({
						title: '请输入正确的身份证号码！',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				// if (!/^62\d{14}$/.test(u.bankNum)) {
				// 	uni.showToast({
				// 		title: '请输入正确的银行卡账号！',
				// 		icon: 'none',
				// 		duration: 2000
				// 	});
				// 	return;
				// }
				// console.log(/^1[34578]d{9}$/.test(u.tel), u.tel)
				// if (!/^1[34578]\d{9}$/.test(u.tel)) {

				// 	uni.showToast({
				// 		title: '请输入正确的电话号码！',
				// 		icon: 'none',
				// 		duration: 2000
				// 	});
				// 	return u.tel.replace(/\D/g, '');
				// }

				// if (!u.sex) {
				// 	uni.showToast({
				// 		title: '请选择性别！',
				// 		icon: 'none',
				// 		duration: 2000
				// 	});
				// 	return;
				// }

				if (!this.agree) {
					uni.showToast({
						title: '您只有同意协议才能使用本服务！',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				this.yzbtn()

			},

			setPass() {
				getCode()

			},
			getCode2: function(e) {
				console.log(e); //输入
				if (e == this.user.payPassword) {
					this.$refs.verify2.hide();
					//发送请求
					this.payPasswordChange({id:uni.getStorageSync('userid'),payPassword:this.user.payPassword})
					console.log(this.user)
					this.realNameAuth({
						id:this.user.id,
						idCard:this.user.idCard,
						realName:this.user.realName
					})
				} else {
					uni.showToast({
						title: '前后密码不一致请重新输入！',
						duration: 2000,
						icon: 'none'
					})
					
						this.$refs.verify2.hide();
						this.$refs.verify.show();
				}
			},
			// 模态框支付
			getCode: function(e) {
				console.log(e); //输入
					if(/^[0-9]{6}$/.test(e)){
						this.user.payPassword = e;
						uni.showToast({
							title: '请确认密码！',
							duration: 2000,
							icon: 'none'
						})
						this.$refs.verify.hide();
						this.$refs.verify2.show();
					}else{
						uni.showToast({
							title: '只能输入数字密码！',
							duration: 2000,
							icon: 'none'
						})
					}
			},
			// 支付模态框出现
			yzbtn() {
				uni.showToast({
					title: '设置6位数字支付密码！',
					duration: 2000,
					icon: 'none'
				})
				this.$refs.verify.show();
			},
			// 支付模态框隐藏
			zfhide() {
				this.$refs.verify.hide();
			}
		}
	}
</script>

<style scoped lang="scss">
	.header {
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		font-size: 24rpx;
		background-color: #F7F7F7;

		icon {
			vertical-align: middle;
		}

		text {
			padding-left: 10rpx;
		}

	}

	.sex {
		border-top: 1rpx solid #EEEEEE;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.already{
		padding: 40rpx;
		.text{
			height: 300rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40rpx;
			border-radius: 20rpx;
			border: 1rpx solid #007AFF;
		}
	}
</style>
